<!-- eslint-disable vue/no-mutating-props -->
<script lang="ts" setup>
import { Dialog, Field } from 'vant'
import { OrderApi } from '~/api/OrderApi'
import { Common } from '~/common'
import { OrderModel } from '~/model'

const props = defineProps<{
  order: OrderModel | undefined
  modelValue: boolean
}>()

const emits = defineEmits([
  'update:modelValue',
  'delete',
])

const searchInput = ref('')
const allOrders = ref([] as OrderModel[])
const allReceiver = ref([] as string[])
const aliasMap = ref(new Map<string, string>())

const materialsFiltered = computed(() => {
  if (!searchInput.value) {
    return allReceiver.value
  }
  else {
    const getAlias = (x: string) => aliasMap.value.get(x) || ''
    console.log('??????????????')

    return allReceiver.value.filter(x => getAlias(x).includes(searchInput.value))
  }
})

function chooseItem(item: string) {
  if (!props.order) {
    return
  }
  props.order.receiver = item
  close()
}

watch(searchInput, (val) => {
  if (props.order) {
    props.order.receiver = val
  }
})

watch(() => props.modelValue, (val) => {
  if (val && props.order) {
    searchInput.value = props.order.receiver
  }
})

onMounted(async () => {
  // 获取订单，根据receiver的订单数进行排序
  const paged = await OrderApi.getPaged(1, 1234567, {
    consumer: props.order?.consumer?.id.toString(),
  })
  allOrders.value = paged.objects

  // allOrders.value = await OrderApi.getAll()
  const counter = new Map<string, number>()
  for (const order of allOrders.value) {
    const r = order.receiver
    const oldVal = counter.get(r)
    if (oldVal === undefined) {
      counter.set(r, 1)
    }
    else {
      counter.set(r, oldVal + 1)
    }
  }
  const rs = [] as string[]
  counter.forEach((count, r) => {
    if (r) {
      rs.push(r)
    }
  })
  allReceiver.value = rs
  allReceiver.value.sort((a, b) => {
    const ka = counter.get(a) || 0
    const kb = counter.get(b) || 0
    return kb - ka
  })

  // 计算alias
  for (const r of allReceiver.value) {
    const _alias = Common.genAliasNameOnly(r)
    aliasMap.value.set(r, _alias)
  }
  console.log(aliasMap.value)
})

function close() {
  emits('update:modelValue', false)
}

function handleCloseDelete() {
  close()
  if (props.order) {
    props.order.receiver = ''
  }
}

// function trueCancel() {
//   close()
// }
function confirm() {
  if (props.order) {
    props.order.receiver = searchInput.value
  }
}
</script>

<template>
  <div v-if="order">
    <Dialog
      :show="modelValue"
      title="编辑收货信息"
      :show-cancel-button="true"
      cancel-button-text="清除"
      :close-on-click-overlay="true"
      @cancel="handleCloseDelete"
      @confirm="confirm"
      @update:show="$emit('update:modelValue', $event)"
    >
      <!-- <Field v-model="order.receiver" mb2 bg-light-5 /> -->
      <Field v-model="searchInput" mb2 bg-light-5 />

      <div h-30vh flex flex-wrap of-auto bg-gray-1 text-center>
        <div
          v-for="(item, index) in materialsFiltered"
          :key="index"
          p2
          style="width:50%"
          b-b="1 solid gray-3"
          @click="chooseItem(item)"
        >
          {{ item }}
        </div>
      </div>
    </Dialog>
  </div>
</template>

<style scoped>

</style>
